<template>
	<view>
		<view class="search_item">
			<uni-card class="input_card">				
				<uni-search-bar @confirm="search" @input="input" :radius="100"
				 placeholder="搜索姓名/编号/手机号"bgColor="#EEEEEE" ></uni-search-bar>										
			</uni-card>		
		</view>		
		
		<view class='selectbar'>
			<picker @change="ordersload()" :value="index" :range="array" class='picker'>
				<view class="uni-input">
					<span class="search-item">{{array[index]}}</span>
					<image src="/static/img/order/orders-select.png" class="selectimg"></image>
				</view>
			</picker>
			<picker @change="ordersload()" :value="index" :range="array" class='picker'>
				<view class="uni-input">
					<span class="search-item">{{array[index]}}</span>
					<image src="/static/img/order/orders-select.png" class="selectimg"></image>
				</view>
			</picker>
			<picker @change="ordersload()" :value="index" :range="array" class='picker'>
				<view class="uni-input">
					<span class="search-item">{{array[index]}}</span>
					<image src="/static/img/order/orders-select.png" class="selectimg"></image>
				</view>
			</picker>
		</view>	
			
		<view class="list-div">
			<uni-list>
			    <!-- 垂直排列，无略缩图，主标题+副标题显示 -->
			    <uni-list-item direction="column" v-for="item in orderslist">
			        <template v-slot:body>
			            <view class="uni-list-box">
			                <view class="uni-content">
			                    <view class="list-span">
									<span class="clientname">{{csdata.clientname}}</span>
									<span class="address">{{csdata.address}}</span>
									<span class="clientstatus">{{csdata.clientstatus}}</span>
								</view>
			                    <view class="">
									<span class="clientnum">{{csdata.clientnum}}</span><br/>
									<span class="ordersdate">{{csdata.ordersdate}}</span>
								</view>
			                </view>
			            </view>
			        </template>
			        <template v-slot:footer>
			            <view class="buttondiv">
			                <button class="showbutton" @click="">查看</button>
			            </view>
			        </template>
			    </uni-list-item>
			</uni-list>
		</view>
	</view>
	
</template>

<script setup>
	import { ref } from 'vue';

const csdata = ref({
	ordersid: '123456789',
	clientname: '小李',
	clientnum: '客户编号',
	ordersdate: '2025-2-14',
	address: '西钓鱼台',
	clientstatus: '待跟踪客户'
});
const orderslist = ref([
	csdata.value,
	csdata.value
]);
const index = ref(1);
//定义部门
const department = ref('设计部门');
const array = ref([
	department.value,
	department.value
]);
const ordersload = () => {
	
}
</script>

<style>
	page{
		background-color: #fff;
		 
	}
	.selectbar {
		position: relative;
		font-size: 20px;
		background-color: #fff;
		height: 60rpx;
	}
	.selectbar > .picker{
		float: left;
		margin-left: 40rpx;
		
	}
	.selectimg {
		width: 26rpx;
		height: 26rpx;
		transform: rotate(-180deg);
	}
	.search-bar {
		position: relative;
		padding-left: 30rpx;
		padding-right: 20rpx;
		padding-bottom: 20rpx;
	}
	.search-bar > image {
		position: absolute;
		top: 10rpx;
		left: 40rpx;
		width: 50rpx;
		height: 50rpx;
	}
	.search-bar > input {
		padding-left: 68rpx;
		padding-right: 24rpx;
		margin-top: 30rpx;
		border: 2rpx solid #e4e4e4;
		border-radius: 12rpx;
		height: 70rpx;
		background-color: #FFFFFF;
	}
	.orders-number {
		position: relative;
		bottom: 24rpx;
		width: 146rpx;
		height: 35rpx;
		background-color: #FF0000;
		border-radius: 12rpx;
	}
	.orders-p {
		margin-top: -8rpx;
		margin-left: 6rpx;
		width: 138rpx;
		height: 28rpx;
	}
	.number {
		font-size: 24rpx;
		color: #FFF;
	}
	.list-div {
		width: 100%;
		height: 180rpx;
		position: absolute;
		top: 250rpx;
		
	}
	.search-item {
		font-size: 24rpx;
	}
	.list-span {
		position: relative;
		bottom: 18rpx;
	}
	.list-span > span {
		display: inline-block;
	}
	.clientname {
		font-size: 32rpx;
		color: #333;
	}
	.address {
		margin-left: 50rpx;
		font-size: 32rpx;
		color: #333;
	}
	.clientstatus {
		float: right;
		font-size: 24rpx;
		color: #F57F76;
	}
	.clientnum {
		font-size: 24rpx;
		color: #aeaeae;
	}
	.ordersdate {
		font-size: 24rpx;
		color: #aeaeae;
	}
	.buttondiv {
		position: absolute;
		right: 10rpx;
		bottom: 40rpx;
		display: inline-block;
		width: 110rpx;
		height: 46rpx;
	}
	.showbutton {
		background-color: #2191F7;
		font-size: 24rpx;
		color: #FFFFFF;
	}

</style>